/*
 * @Author: dingyuwen ding_yuwen@163.com
 * @Date: 2023-02-13 14:56:49
 * @LastEditTime: 2023-03-17 15:17:24
 * @LastEditors: DingYuwen 43669762+DingYuwen@users.noreply.github.com
 * @Description:
 */
import {
  Button,
  Flex,
  Heading,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalHeader,
  ModalOverlay,
  Stat,
  StatHelpText,
  StatLabel,
  StatNumber,
  Text,
  Tooltip,
  useColorModeValue,
  useDisclosure,
} from '@chakra-ui/react';

import { ReactElement, useState } from 'react';
import { AiOutlineTransaction } from 'react-icons/ai';

import CostRecords from './CostRecords';
import DetailTable from './DetailTable';
import ExtractRecords from './ExtractRecords';
import TransactionForm from './TransactionForm';

import MyDivider from '@/common/components/Divider';

import { useAppSelector } from '@/store/hooks';

type ModalName = 'transactionForm' | 'extractRecords' | 'costRecords';

type ModalInfo = {
  title: string;
  body: ReactElement;
  button: string;
  key: ModalName;
  icon?: ReactElement;
};

const modalMap: Record<ModalName, ModalInfo> = {
  transactionForm: {
    title: '划转余额',
    body: <TransactionForm />,
    button: '划转',
    key: 'transactionForm',
    icon: <AiOutlineTransaction />,
  },
  extractRecords: {
    title: '申请提现',
    body: <ExtractRecords />,
    button: '提现',
    key: 'extractRecords',
    icon: <AiOutlineTransaction />,
  },
  costRecords: {
    title: '图蝇币扣减记录',
    body: <CostRecords />,
    button: '扣减记录',
    key: 'costRecords',
  },
};

const SHOW_BUTTONS = false;

export default function Commission() {
  const { recommendInfo } = useAppSelector((store) => store.profile);
  const {
    commissionPayed,
    commissionPaying,
    // commissionResidual,
    countInvitee,
  } = recommendInfo;
  const [currentModal, setCurrentModal] = useState<string>('transactionForm');
  const {
    isOpen: modalIsOpen,
    onOpen: modalOnOpen,
    onClose: modalOnClose,
  } = useDisclosure();
  const { isOpen, onOpen, onClose } = useDisclosure();

  const renderButton = () => {
    return Object.keys(modalMap).map((key) => {
      const { button, icon } = modalMap[key as keyof typeof modalMap];
      return (
        <Button
          key={`btn_${key}`}
          variant="outline"
          size="sm"
          leftIcon={icon}
          mr="2"
          onClick={() => {
            setCurrentModal(key);
            modalOnOpen();
          }}
        >
          {button}
        </Button>
      );
    });
  };

  return (
    <Flex justify="flex-start" w="full" gap="4" p="3" direction="column">
      <Heading>贡献及收益</Heading>
      <Stat
        px={{ base: 4, md: 8 }}
        py="5"
        shadow="xl"
        border="1px solid"
        flexGrow="0"
        borderColor={useColorModeValue('gray.800', 'gray.500')}
        rounded="lg"
      >
        <StatLabel fontWeight="medium" isTruncated>
          累计邀请 {countInvitee} 人， 获得
        </StatLabel>
        <StatNumber fontSize="4xl" fontWeight="medium">
          {commissionPayed}{' '}
          <Text as="span" fontSize="md">
            图蝇币
          </Text>
        </StatNumber>
        {commissionPaying > 0 && (
          <Tooltip
            hasArrow
            placement="top"
            label="佣金已记录但尚未发放"
            fontSize="md"
          >
            <StatHelpText w="max-content">
              确认中： {commissionPaying} 图蝇币
            </StatHelpText>
          </Tooltip>
        )}

        <Flex justify="end">
          <Button size="sm" onClick={onOpen}>
            查看明细
          </Button>
        </Flex>

        {SHOW_BUTTONS && (
          <>
            <MyDivider />
            <StatHelpText mt="2">剩余佣金： 3,900 图蝇币</StatHelpText>
            {renderButton()}
            <Modal
              isOpen={modalIsOpen}
              onClose={modalOnClose}
              size={{ base: 'sm', md: 'md' }}
              isCentered
            >
              <ModalOverlay />
              <ModalContent fontFamily="Inter">
                <ModalCloseButton className="modal-close-btn" />
                <ModalHeader fontWeight="bold" pb={3}>
                  {modalMap[currentModal as keyof typeof modalMap].title}
                </ModalHeader>
                <ModalBody>
                  {modalMap[currentModal as keyof typeof modalMap].body}
                </ModalBody>
              </ModalContent>
            </Modal>
          </>
        )}
      </Stat>
      <Modal
        isOpen={isOpen}
        onClose={onClose}
        size={{ base: 'sm', md: '3xl' }}
        isCentered
      >
        <ModalOverlay />
        <ModalContent fontFamily="Inter">
          <ModalCloseButton className="modal-close-btn" />
          <ModalHeader fontWeight="bold" pb={3}>
            佣金明细
          </ModalHeader>
          <ModalBody>
            <DetailTable />
          </ModalBody>
        </ModalContent>
      </Modal>
    </Flex>
  );
}
